<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5462c7452d4a2724" async="async"></script>

<section class="background-page">
	<div class="row padding-top">

		<tiles:insertAttribute name="categorylist" />

		<article class="column custom-main-column">
			<div id="featured-tabs">
				<div class="row small-padding-bottom">
					<div class="column large-6 left-tab">
						<div ng-class="{active: homeTabs.popularCategories}"
							ng-click="homeTabs.popularCategories = true; homeTabs.featuredItems = false; initEqualHeights()"
							class="featured-tab box-shadow clearfix clickable extra-small-padding-top extra-small-padding-bottom active">
							<h3
								class="small text-center inverse no-margin-top no-margin-bottom">Popular
								Categories</h3>
						</div>
					</div>
					<div class="column large-6 right-tab">
						<div ng-class="{active: homeTabs.featuredItems}"
							ng-click="homeTabs.featuredItems = true; homeTabs.popularCategories = false; initEqualHeights()"
							class="featured-tab box-shadow clearfix clickable extra-small-padding-top extra-small-padding-bottom">
							<h3
								class="small text-center inverse no-margin-top no-margin-bottom">Featured
								Listings</h3>
						</div>
					</div>
				</div>
				<div id="popular-categories"
					ng-class="{&#39;active&#39;: homeTabs.popularCategories, &#39;in-active&#39;: homeTabs.featuredItems}"
					class="tab-section active">

					<s:iterator value="popularCategories" status="status" var="catPop">

						<s:if test="#status.index % 3 == 0">
							<div class="row collapse" data-equal=".equal">
								<div data-equal=".equal-heading">
									<div data-qual=".equal-paragraph">
						</s:if>
						<div class="column large-4 card-column left">
							<div class="box-shadow card listing">
								<div class="content-padding background-off-white equal"
									style="min-height: 489px;">
									<h3 class="small equal-heading" style="min-height: 82px;">
										<s:url action="listing" var="listing">
											<s:param name="categoryId" value="%{#catPop.id}" />
										</s:url>
										<s:a href="%{listing}">
											<s:property value="name" />
										</s:a>
									</h3>
									<div class="image-container clearfix">
										<s:a href="%{listing}">
											<s:iterator value="#catPop.photos" var="catPopPhoto">
												<s:if test="#catPopPhoto.dimension == 'S'">
													<img class="four-box" src="${ catPopPhoto.URL }"
														alt="${ catPop.name }">
												</s:if>
											</s:iterator>
										</s:a>
									</div>
									<p class="equal-paragraph small-padding-top">
										<s:property value="description" />
									</p>
								</div>
								<div
									class="content-padding-large background-off-white border-top">
									<div class="text-center">
										<s:a href="%{listing}"
											cssClass="button alt small no-margin-bottom">
											<i class="fa fa-list left-side"></i> View Items
											</s:a>
									</div>
								</div>
							</div>
						</div>
						<s:if test="#status.index % 3 == 2 || #status.last">
				</div>
			</div>
	</div>
	</s:if>
	</s:iterator>
	</div>

	<div id="featured-items"
		ng-class="{active: homeTabs.featuredItems, hide: homeTabs.popularCategories}"
		class="tab-section hide">

		<s:iterator value="featuredPosts" status="status" var="postFeatured">

			<s:if test="#status.index % 3 == 0">

				<div class="row collapse" data-equal=".equal">
			</s:if>

			<div class="column large-4 card-column left small-margin-top">
				<div class="box-shadow card listing featured">
					<h6
						class="background-intense no-margin-bottom inverse text-center bottom-arrow">FEATURED
						PRODUCT</h6>
					<div class="content-padding background-off-white equal"
						style="min-height: 0px;">

						<div class="image-container">
							<s:url action="viewing" var="viewing">
								<s:param name="postId" value="%{#postFeatured.id}" />
							</s:url>
							<s:a href="%{viewing}">
							<s:iterator value="#postFeatured.photos.{^#this.dimension=='M'}" var="postPhoto" status="stat">
											<s:if test="#stat.first == true">
												<img src="${ postPhoto.URL }" alt="${ postFeatured.equipmentName }">
											</s:if>
							</s:iterator>
							
							</s:a>
						</div>
						<h3 class="small">
							<s:a href="%{viewing}">
								<s:property value="equipmentName" />
							</s:a>
						</h3>
						<p class="bold light">
							<i class="fa fa-barcode"></i> LISTING ID:
							<s:property value="equipmentItemNumber" />
						</p>
						<p>
							<s:property value="title" />
						</p>
					</div>
					<div class="content-padding-large background-off-white border-top">
						<div class="text-center">
							<s:a href="%{viewing}"
								cssClass="button alt small no-margin-bottom">
								<i class="fa fa-plus-square left-side"></i> More Info
								</s:a>
						</div>
					</div>
				</div>
			</div>
			<s:if test="#status.index % 3 == 2 || #status.last">
	</div>
	</s:if>
	</s:iterator>
	</div>
	</div>
	<div
		class="row background-large-blue box-shadow collapse margin-bottom relative">
		<div class="background-dark-blue-transparent half-full"></div>
		<div
			class="column large-6 text-center above show-background-small background-dark-blue-transparent">
			<h3
				class="inverse extra-small-padding-top extra-extra-small-padding-bottom">
				<em>List Your Products with Us!</em>
			</h3>
			<s:url action="uploading" namespace="" var="step1" />
			<s:a href="%{step1}"
				cssClass="button orange">Sell Your Equipment</s:a>
		</div>
		<div class="column large-6 text-center">
			<h3 class="extra-small-padding-top extra-extra-small-padding-bottom">
				<em>See what else we have to offer!</em>
			</h3>
			<a href="http://www.shiplanet.com" class="button blue">Signup</a>
		</div>
	</div>
	</article>
	</div>
</section>